<template>
  <div class="ng">
    <div class="Navigation">
      <!-- Modal -->
      <div
        class="modal fade"
        id="staticBackdrop"
        data-backdrop="static"
        data-keyboard="false"
        tabindex="-1"
        role="dialog"
        aria-labelledby="staticBackdropLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header position-relative">
              <button
                type="button"
                class="close position-absolute"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <detail class="det"></detail>
            </div>
          </div>
        </div>
      </div>
      <!--  -->

      <div class="header">
        <div class="header_p">
          <p class="header_p1">{{ keyValue }}</p>
          <!-- <p class="header_p2">
          从野兽派建筑到极简主义建筑，这个Unsplash
          Awards类别展示了建筑艺术，试图理解和反思塑造一个地方叙事的建筑。
        </p> -->
        </div>

        <!-- <button class="anniu">提交给建筑</button> -->
        <div class="index">
          <div class="index_yilou" :key="index" v-for="(item, index) in list">
            <div>
              <a data-toggle="modal" data-target="#staticBackdrop"
                ><img :src="item.image" alt=""
              /></a>
            </div>
            <div class="index_yilou_d1">
              <div class="index_yilou_d1_1">
                <a href="/comm">{{ item.subject }}</a>
              </div>
              <div class="index_yilou_d1_2">{{ item.fenlei }}</div>
              <div class="index_yilou_d1_3">
                <a href="/comm">
                  <div class="iconfont icon-guankan1">{{ item.views }}}</div>
                  <div class="iconfont icon-pinglun1">{{ item.comment }}</div>
                  <div class="iconfont icon-zan">{{ item.xihuan }}</div>
                </a>
              </div>
            </div>
            <div class="index_yilou_d1_4">
              <img :src="item.avata" alt="" />
              <a href="">{{ item.uname }}</a>
              <span>{{ item.time }}</span>
            </div>
          </div>
        </div>
        <!-- <div class="f">
          <div class="fenye1"><a href="">1</a></div>
          <div class="fenye2"><a href="">2</a></div>
          <div class="fenye2"><a href="">3</a></div>
          <div class="fenye2"><a href="">4</a></div>
          <div class="fenye2"><a href="">5</a></div>
          <div class="fenye3"><a href="">...</a></div>
          <div class="fenye2"><a href="">99</a></div>
          <div class="fenye2"><a href="">100</a></div>
          <div class="fenye2"><a href="">></a></div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import Detail from "../../views/Detail.vue";

export default {
  props: ["keyValue"],
  data() {
    return {
      list: [],
    };
  },
  methods: {
    // 去重
    delrep(arr) {
      return arr.reduce((p, v) => {
        let _s = true;
        p.forEach((element) => {
          if (element.id == v.id) {
            _s = false;
          }
        });
        _s ? (p = p.concat(v)) : "";
        return p;
      }, []);
    },
  },
  watch: {
    async keyValue() {
      let _res = await this.axios.get(`/search/`, {
        params: { key: this.keyValue },
      });
      this.list =this.delrep(_res.data.data);
      console.log(this.list);
    },
  },
  async mounted() {
    let _res = await this.axios.get(`/search/`, {
      params: { key: this.keyValue },
    });
    this.list =this.delrep(_res.data.data);
    console.log(this.list);
  },
  components: {
    Detail,
  },
  //  beforeRouteUpdate(to,from,next){
  //   console.log(to.params.keyValue)
  // },
};
</script>>

<style lang="less">
@import url("~@/assets/Navigation/css/navigation.css");
@import url("~@/assets/Navigation/css/font_2025718_lh55ds847i/iconfont.css");
.ng {
  // 详情背景
  .det {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  // 修改高度
  .Navigation .header_p {
    height: 70px !important;
  }
  // 模态

  .Navigation {
    .modal-content {
      border: 0px;
      background-color: rgba(0, 0, 0, 0);
      .modal-header {
        z-index: 20;
        border-bottom: 0px;
        .close {
          left: 6px;
          top: 48px;
          span {
            opacity: 0;
          }
        }
      }
      .modal-body {
        padding: 0px !important;
      }
    }
    ._btn5 {
      z-index: 0;
    }
  }
  .Navigation .index {
  justify-content: left;
}
 .Navigation .index_yilou{
margin: 5px 5px;
 }
}

@media (min-width: 576px) {
  .modal-dialog {
    // max-width: 0px;
    margin: 0px;
    max-width: 100%;
  }
}

</style>


